<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES" lang="es_ES" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	
		<title>Conecta con tus marcas favoritas y accede a regalos y ofertas exclusivas</title>
	
		<meta name="author" content="Runroom http://www.runroom.com" />
		<meta name="language" content="es_ES" />
		<meta http-equiv="content-style-type" content="text/css" />
		<meta http-equiv="content-script-type" content="text/javascript" />
		<meta name="robots" content="index,follow" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />

		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

		<!-- hojas de estilo //-->
<!-- 
		<link media="all" rel="stylesheet" href="css/pre-v3.css">
 -->
		<link media="all" rel="stylesheet" href="css/styles.css" />
		<link media="all" rel="stylesheet" href="css/custom.css" />
		<link media="all" rel="stylesheet" href="css/qp-v3.css" />
		<link media="all" rel="stylesheet" href="css/user-backoffice.css" />


		<!-- conditional comment: CSS para Explorer 7 y menor //-->
			<!--[if lte IE 7]>
				<link rel="stylesheet" href="css/ie7menos.css" />
			<![endif]-->
	
		<!-- incluir scripts //-->
		<script type="text/javascript" src="js/jquery.tools.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		<script type="text/javascript" src="js/jquery.periodicalupdater.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=ABQIAAAAzClpJywkGASi3cdCCxdvnBRyVQWqmkHGDTi57WK1YtyDytrQIhQNeQ5HGi7cnaGyd90vRPydCOgxrA&amp;sensor=false&amp;language=es_ES&amp;v=3.1&amp;region=ES"></script>
		<script type="text/javascript" src="js/json2.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<script type="text/javascript" src="js/locationSelector.js"></script>
		<script type="text/javascript" src="js/jquery.flip.min.js"></script>
		<script type="text/javascript" src="js/jquery.countdown.js"></script>
		<script type="text/javascript" src="js/jquery.countdown-es_ES.js"></script>
		<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
		<script type="text/javascript" src="js/jquery.localscroll-min.js"></script>
		<script type="text/javascript" src="js/localscroll.js"></script>
		<script type="text/javascript" src="js/jquery.curvycorners.min.js"></script>
		<script type="text/javascript" src="js/jquery.fullscreenr.js"></script>	
		<script type="text/javascript" src="js/qp_tabs.js"></script>
		<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
		<script type="text/javascript" src="js/fileuploader.js"></script>
		<script type="text/javascript" src="js/s3Capcha.js"></script>
		<script type="text/javascript" src="js/feeds.js"></script>
		<script type="text/javascript" src="js/feeds_home.js"></script>
<!-- 
		<script type="text/javascript" src="js/headerscripts.js"></script>
 -->
		<!-- end incluir scripts //-->

	</head>
	
	<body>
		<a name="top"></a>
		<div id="fb-root"></div>
	
		<noscript>
			<div id="aviso_js">
				<p>Lo sentimos, pero esta web sólo funciona con Javascript activado.</p>
			</div>
		</noscript>

		<!-- conditional comment: aviso para Explorer 6 y menor //-->
			<!--[if lte IE 6]>
				<div id="aviso_ie">
					<p><strong>Hemos detectado que utilizas Internet Explorer 6</strong>, un navegador obsoleto, con problemas de seguridad y compatibilidad conocidos.</p>
					<p>Recomendamos que actualices tu navegador <a href="http://www.browserchoice.eu">en la web de browserchoice.org, haciendo clic aquí</a></p>
				</div>
			<![endif]-->

		<div class="header">
			<div class="session-links">
				<a title="Accede a tu cuenta Qporama" href="registro">Inicia sessión</a>
				<a title="Crea una cuenta Qporama" href="registro">Regístrate</a>
			</div> <!-- / .social-links -->	
			
			<div class="social-links">
				<a title="Visita la página Facebook de Qporama" class="facebook" href="facebook"><span>facebook</span></a>
				<a title="Visita la página Twitter de Qporama" class="twitter" href="twitter"><span>twitter</span></a>
			</div> <!-- / .social-links -->	
	
	
			<h2 class="logo_claim">
				<a class="logo" name="top" title="volver a la página de inicio" href="index.html">
					<span class="hidden">Qporama: Conecta con tus marcas favoritas y accede a regalos y ofertas exclusivas</span>
				</a>
			</h2>
			<h1 class="claim">
				Conecta con tus <strong>marcas</strong> favoritas y <br />accede a <strong>regalos</strong> y ofertas <strong>exclusivas</strong>
			</h1>
		</div> <!-- / .header -->
	
		<div class="fondo-pagina" style="background: url(css/css_images/fondo-home-beige.jpg);">
			<div class="gradient">&nbsp;</div>
		</div>


		<div class="user">
			<div class="profile">
				<p class="profile-pic"><span class="corners w50px l" style="margin-right: 10px;"><img id="profile-img-photo-booth" src="images/users/perfil-201011241238-a.jpg" alt="Maria" width="50px" height="50" /><span class="cornersgris"></span></span></p>
				<p><span class="bienvenido">Bienvenida, <strong>María</strong>!</span> <small class="bot-salir"><b></b><a href="#">Salir</a></small> </p>
				<p class="mis_cosas">
					<span class="active"><b></b><a href="#">mi perfil</a></span>
					<span><b></b><a href="#">mis tarjetas</a></span>
					<span><b></b><a href="#">mis compras</a></span>
				</p>
			</div> <!-- cerrar profile //-->
			<div class="mensajes">
				<h2 class="titulo-principal">Revisa o cambia tu perfil</h2>
				<p class="soft">Recuerda rellenar todos los campos para recibir las mejores ofertas adaptadas a tu gusto.</p>
			</div> <!-- cerrar mensajes //-->
		</div> <!-- cerrar user //-->


		<div class="buscar">
			<form action="#" method="get">
				<p class="fondo-input-buscar l"><input type="text" id="buscar" value="Busca un negocio o una oferta" /></p>
				<ul class="fondo-select selecciona-categoria">
					<li class="catselector-link" onclick="$('#CatSelector').slideToggle('fast');">Selecciona una categoría
						<ul id="CatSelector">
							<li><a title="Moda y Complementos" href="#">Comer y beber</a></li>
							<li><a title="Moda y Complementos" href="#">Moda y Complementos</a></li>
							<li><a title="Moda y Complementos" href="#">Moda y Complementos</a></li>
							<li><a title="Moda y Complementos" href="#">Moda y Complementos</a></li>
						</ul>
					</li>
				</ul>

				<p class="fondo-select l" style="position: relative; left: -2px; z-index: 0;"><input type="text" id="location_selector_ciudad" value="Barcelona" /> <small><a id="location_selector_ciudad_cambiar" href="javascript:;">[cambiar]</a></small></p>
				<p class="boton secundario grande l"><input type="submit" value="buscar" /></p>
			</form>
		</div> <!-- cerrar buscar //-->

<!-- aqui empieza el div class="page -->
<div class="page">


<!-- columna de contenido principal //-->
		<div class="c-960">
			<!-- columna de contenido gris, tipo "login" //-->
			<div class="caja c960 f1f1f1 contabs">
				<div class="content datainput">

						<ul id="tabs">
							<li class="tab active"><span class="tablink">Mis datos personales</span></li>
							<li class="tab"><a class="tablink" href="#tabs-2">Configurar notificaciones</a></li> 
							<li class="tab"><a class="tablink" href="#tabs-3">Configurar redes sociales</a></li>
						</ul><!-- cerrar tabs //-->


							 	<div id="tabs-1" class="tabcontent active">

									<div id="photobooth" class="promos laterales">
										<div class="sidebox blue">
											<p>Imagen personalizada</p>
											<p class="sideimg"><span class="corners w50px l"><img id="profile-img-photo-booth" src="images/users/perfil-201011241238-a.jpg" alt="Maria" width="50px" height="50" /><span class="cornerseaf4f9"></span></span></p>
											<div class="sideboxtxt">
												<!--  el contenedor del dialog -->
												<div id="dialog-photo-booth"></div>
												<div id="delete-photo-booth"><p><small><a href="#"><span class="borrar">x</span> Borrar Imagen actual</a></small></p></div>
												<div id="modify-photo-booth"><p><small><a href="#">Modificar Imagen actual</a></small></p></div>
											</div>
											<div class="clear">&nbsp;</div>
											<p><small>Sube una imagen desde tu ordenador *</small></p>
											<p><input type="file" name="" style="font-size: 11px; margin: 5px 0 15px 0;" /></p>
											
											<p class="xtrasoft"><small>* Subiendo un archivo, confirmas que tienes el derecho de publicar esta foto y que no viola los <a href="#">términos de uso</a>.</small></p>
										</div> <!-- cerrar nospam //-->
									</div> <!-- cerrar promos laterales //-->

										<div class="formulario ancho" style="margin-top: -40px;">
										<form class="form-tooltip form-validator f620" action="validate.php" method="post">
											<p><label for="name">Nombre</label></p>
											<p class="fondo-input"><input type="text" value="Maria" id="name" required="required" name="name" rel="tooltip" title="Escribe tu nombre" tabindex="1"/></p>
											<p><label for="surname">Apellidos</label></p>
											<p class="fondo-input"><input type="text" value="Fernández de Castro" id="surname" required="required" name="surname" rel="tooltip" title="Escribe tus apellidos" tabindex="2"/></p>
											<p><label for="email">E-mail</label></p>
											<p class="fondo-input"><input type="email" value="maria@gmail.com" id="email" required="required" name="email" rel="tooltip" title="Escribe tu email" disabled="disabled" /></p>
											<p><label for="mobile">Teléfono móvil</label></p>
											<p class="fondo-input"><input type="text" value="+346000000" id="mobile"  name="mobile" rel="tooltip" title="Escribe tu teléfono móvil" tabindex="3"/></p>

<!-- TODO: hacer que funcionen los radio-images //-->
											<div class="genderselection">
												<p>Sexo</p>
												<p class="f-selection checked" title="{{translate lang=$locale}}Selecciona que eres mujer{{/translate}}">
													<label for="sex-f">Mujer 
														<input type="radio" value="f" id="sex-f" name="sex" rel="tooltip" title="{{translate lang=$locale}}Selecciona si eres mujer{{/translate}}" tabindex="4" checked="checked" />
													</label>
													<span class="img">&nbsp;</span>
												</p>
												<p class="m-selection" title="{{translate lang=$locale}}Selecciona que eres hombre{{/translate}}">
													<label for="sex-m">Hombre 
														<input type="radio" value="m" id="sex-m" name="sex" rel="tooltip" title="{{translate lang=$locale}}Selecciona si eres hombre{{/translate}}" tabindex="5" />
													</label>
													<span class="img">&nbsp;</span>
												</p>
											</div>

											<p><label for="day">Fecha de nacimiento</label></p>
											<p class="fondo-input">
												<select id="day" required="required" name="day" rel="tooltip" title="Selecciona tu día de nacimiento" tabindex="6">
													<option value="0">dia</option>
													<option value="01" selected="selected">01</option>
													<option value="02">02</option>
													<option value="03">03</option>
												</select>
											
												<select  id="month" required="required" name="month" rel="tooltip" title="Selecciona tu mes de nacimiento" tabindex="7">
													<option value="0">mes</option>
													<option value="01" selected="selected">enero</option>
													<option value="02">febrero</option>
													<option value="03">marzo</option>
												</select>
	
												<select  id="year" required="required" name="year" rel="tooltip" title="Selecciona tu año de nacimiento" tabindex="8">
													<option value="0">año</option>
													<option value="2010" selected="selected">2010</option>
													<option value="2011">2011</option>
													<option value="2012">2012</option>
												</select>
											</p>
											<p><label for="address">Dirección</label></p>
											<p class="fondo-input"><input type="text" value="C/ Milà i Fontanals" id="address" required="required" name="address" rel="tooltip" title="Escribe tu dirección" tabindex="9"/></p>
											<p><label for="po_code">Código postal</label></p>
											<p class="fondo-input"><input type="text" value="08012" id="po_code" required="required" name="po_code" rel="tooltip" title="Escribe tu código postal" tabindex="10"/></p>
											<p><label for="city">Ciudad</label></p>
											<p class="fondo-input"><input type="text" value="Barcelona" id="city" required="required" name="city" rel="tooltip" title="Escribe tu ciudad" tabindex="11"/></p>
											<p><label for="prov">Provincia</label></p>
											<p class="fondo-input"><input type="text" value="Barcelona" id="prov"  name="prov" rel="tooltip" title="Escribe tu provincia" tabindex="12"/></p>										
											<p><label for="country">País</label></p>
											<p class="fondo-input">
												<select  id="country" required="required" name="country" rel="tooltip" title="Selecciona tu país" tabindex="13">
													<option value="0">Selecciona un país</option>
													<option value="231">Afganistán</option>
													<option value="230">Albania</option>
													<option value="1">Alemania</option>
													<option value="40" selected="selected">Andorra</option>
													<option value="41">Angola</option>
												</select>
											</p>
											<p><label for="nif">NIF/NIE</label></p>
											<p class="fondo-input"><input type="text" value="46897653N" id="nif"  name="nif" rel="tooltip" title="Escribe el número de la tarjeta" tabindex="14"/></p>
											<p><label for="password">Nueva contraseña</label></p>
											<p class="fondo-input"><input type="password" value="" id="password"  name="password" rel="tooltip" title="Introduce tu nueva contraseña. Si no quieres cambiarla, deja estos campos vacíos." tabindex="15"/></p>
											<p><label for="password-2">Repetir nueva contraseña</label></p>
											<p class="fondo-input"><input type="password" value="" id="password-2"  data-equals="password" name="password-2" rel="tooltip" title="Vuelve a introducir la contraseña" tabindex="15"/></p>
				

											<p class="boton primario grande" style="display: block; float: left; width: 162px; margin: 20px 20px 20px 0;"><input type="submit" value="actualizar datos" /></p>
											<p style="display: block; float: left; width: auto; height: 42px; line-height: 42px; margin: 20px;"><a href="#" title="cancelar">cancelar</a></p>

										</form>

										</div> <!-- cerrar div formulario grande //-->	
							 </div> <!-- cerrar tabs 1 //-->




								<div id="tabs-2" class="tabcontent">
											<p>Enviar notificaciones por e-mail a</p>									
											<p><span class="mail">maria@gmail.com</span> <a href="#">[cambiar]</a></p>
										
											<h4>Enviar notificaciones por SMS a</h4>
										
											<p><span class="phone" id="phone_number">0034 - 6000000</span> <a href="#" onclick="$('#phone-box').slideToggle();">[cambiar]</a></p>

											<div id="phone-box" class="oculto">
												<p>Actualiza tu número de teléfono</p>
												<p><label for="prefijo">Prefijo internacional</label></p>
												<p>
													<select id="prefijo" name="prefijo">
														<option value="+34">España +34</option>
														<option value="+33">Francia +33</option>
														<option value="+63">Filipinas +63</option>										
													</select>
												</p>
												<p><label for="phone">Tu número</label></p>
												<p class="fondo-input"><input type="text" value="" id="phone" name="phone" rel="tooltip" /></p>
												<p><input type="button" value="actualizar" onclick="actPhone(); return false;" /> <a href="#" onclick="$('#phone-box').slideToggle();">cancelar</a></p>
											</div> <!-- cerrar phone-box //-->

											<h4>Comunicados</h4>
											<p><label for="newsletter"><input type="checkbox" value="1" name="newsletter" id="newsletter" />desero recibir la newsletter</label></p>
											<p><label for="offerts"><input type="checkbox" value="1" name="offerts" id="offerts" />desero recibir ofertas</label></p>
											<p><label for="daily"><input type="radio" value="1" name="period" id="daily" />diario (1 comunicado al día)</label></p>
											<p><label for="weekly"><input type="radio" value="2" name="period" id="weekly" />semanal (1 comunicado a la semana)</label></p>
											<p><label for="monthly"><input type="radio" value="3" name="period" id="monthly" />mensual (1 comunicado al mes)</label></p>

											<h4>Notificaciones</h4>
											<table>
												<tr>
													<th>Enviar cuando</th>
													<th>E-mail</th>
													<th class="oculto">SMS</th>
												</tr>
												<tr>
													<td>se publique una nueva <strong>tarjeta</strong></td>
													<td><input type="checkbox" value="1" checked="checked" /></td>
													<td class="oculto"><input type="checkbox" value="1" checked="checked" /></td>
												</tr>
												<tr>
													<td>se publique una nueva <strong>oferta</strong> de una de mis tarjetas</td>
													<td><input type="checkbox" value="1" checked="checked" /></td>
													<td class="oculto"><input type="checkbox" value="1" checked="checked" /></td>
												</tr>
												<tr>
													<td>se publique una nueva <strong>foto</strong> de una de mis tarjetas</td>
													<td><input type="checkbox" value="1" checked="checked" /></td>
													<td class="oculto"><input type="checkbox" value="1" checked="checked" /></td>
												</tr>
												<tr>
													<td>se añada un <strong>usuario</strong> a una de mis tarjetas</td>
													<td><input type="checkbox" value="1" checked="checked" /></td>
													<td class="oculto"><input type="checkbox" value="1" checked="checked" /></td>
												</tr>
												<tr>
													<td>se realice un <strong>evento</strong> en una de mis tarjetas una nueva tarjeta</td>
													<td><input type="checkbox" value="1" checked="checked" /></td>
													<td class="oculto"><input type="checkbox" value="1" checked="checked" /></td>
												</tr>										
											</table>
											<p class="boton primario grande" style="display: block; float: left; width: 162px; margin: 20px 20px 20px 0;"><input type="submit" value="actualizar datos" /> <a href="#">cancelar</a></p>
											<p style="display: block; float: left; width: auto; height: 42px; line-height: 42px; margin: 20px;"><a href="#" title="cancelar">cancelar</a></p>
								</div> <!-- cerrar tabs-2 //-->


								<div id="tabs-3" class="tabcontent">
									<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
									<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
								</div> <!-- cerrar tabs-3 //-->




				<div class="clear">&nbsp;</div>
				</div> <!-- cerrar content //-->
				<div class="cierre"></div>
		</div> <!-- cerrar caja c960 f1f1f1 //-->

		</div> <!-- cerrar columna de 960px de ancho //-->

	</div><!-- cerrar page //-->

<div id="gototop"><p><a href="#top">volver arriba</a></p> </div>
</body>
</html>